<template>
    <div>
        <!-- 面包屑 -->
        <bread></bread>
         <!-- 按钮 -->
        <el-button @click="add" class="btn" type="primary" size="small">添加</el-button>
        <!-- 列表 -->
        <v-list @edit="edit"></v-list>
        <!-- 弹窗 -->
        <v-dialog @close="close" :info="info" ref="dialog"></v-dialog>
    </div>
</template>

<script lang="ts" setup>
import vList from './list.vue'
import vDialog from './dialog.vue'
import {reactive,ref} from 'vue'
// 控制子组件弹窗的显示隐藏以及标题更改
let info = reactive({
    isShow:false,
    isAdd:false
})
// 添加按钮事件
let add = ()=>{
    info.isShow=true; // 显示弹窗
    info.isAdd=true  // 控制标题为  添加管理员
}
// 子组件编辑按钮
let dialog = ref()
let edit = (uid:number)=>{
    info.isShow=true; // 显示弹窗
    info.isAdd=false  // 控制标题为  修改管理员
    dialog.value.lookup(uid) // 将uid 传递给弹窗
}
// 子组件取消按钮
let close = ()=>{
    info.isShow=false; // 隐藏弹窗
}
</script>

<style scoped>
.btn{
    margin: 10px;
}
</style>
